import React from 'react';
import {connect} from 'dva';
import {Form, Select, Button, Modal, InputNumber} from 'antd';
const FormItem = Form.Item;
const R=require("ramda");

const strategyDetail = Form.create()(class StrategyDetail extends React.Component{
        constructor(props){
            super(props);
            this.state = {
                open: false
            }
        }

        handleOpen= () => {
            this.setState({ open: true });
        }


        handleCancel = () => {
            this.setState({ open: false });
            this.props.form.resetFields();
        }

        handleConfirm = () =>{
            this.props.form.validateFields((errors, values) => {
                if (errors) return; 
                values.id = this.props.strategy.dataSource && this.props.strategy.dataSource.id ? this.props.strategy.dataSource.id : null;
                if(!R.equals(R.pick(Object.keys(values),this.props.strategy.dataSource),values)){
                    this.props.dispatch({
                        type: R.isNil(values.id) ? 'strategy/addStrategy' : 'strategy/updateStrategy',
                        payload:{
                            ...values,
                            onSuccess:() =>{
                                this.handleCancel();
                                if(this.props.refreshList) this.props.refreshList();
                            }
                        }
                    })
                }
            });
        }

    render(){
        const { getFieldDecorator } = this.props.form;
        let formItemLayout = { labelCol: { span: 7 }, wrapperCol: { span: 14 } };
        let dataSource = this.props.strategy.dataSource ? this.props.strategy.dataSource : {};

        let footer = [
            <Button key="save" size="large" loading={this.props.loading} onClick={this.handleConfirm.bind(this)} style={{ display: this.state.disabled ? 'none' : 'inline-block' }}>保存</Button>,
            <Button key="cancel" size="large" loading={this.props.loading} onClick={this.handleCancel.bind(this)}>{this.state.disabled ? "关闭" : "取消"}</Button>
        ];        

        return(
            <Modal  maskClosable={false} visible={this.state.open} width={520} title={"创建价格策略"} confirmLoading={this.props.loading} onCancel={this.handleCancel.bind(this)} footer={footer}>
                <Form>
                <FormItem
                    {...formItemLayout}
                    label="业务类型"
                    hasFeedback
                >
                    {getFieldDecorator('businesstype', {
                        rules: [{
                            required: true, message: '请输入业务类型',
                        }],
                        initialValue: dataSource.businesstype
                    })(
                        <Select>
                            <Option value="orderSettlement">收汇区间</Option>
                            <Option value="priceStrategy">价格策略</Option>
                        </Select>
                    )}
                </FormItem>
                <FormItem
                    {...formItemLayout}
                    label="收费类型"
                    hasFeedback
                >
                    {getFieldDecorator('type', {
                        rules: [{
                            required: true, message: '请输入收费类型',
                        }],
                        initialValue: dataSource.type
                    })(
                        <Select>
                            <Option value="1">按笔固定</Option>
                            <Option value="2">按百分比</Option>
                        </Select>
                    )}
                </FormItem>
                <FormItem
                    {...formItemLayout}
                    label="保底收费 CNY"
                    hasFeedback
                >
                    {getFieldDecorator('lowprice', {
                        rules: [{
                            required: true, message: '请输入保底收费',


                        }],
                        initialValue: dataSource.lowprice
                    })(
                        <InputNumber min={0} max={99999999999} precision={4} style={{width:280}}/>
                    )}
                </FormItem>
                <FormItem
                    {...formItemLayout}
                    label="封顶收费 CNY"
                    hasFeedback
                >
                    {getFieldDecorator('highprice', {
                        rules: [{
                            required: true, message: '请输入封顶收费',

                        }],
                        initialValue: dataSource.highprice
                    })(
                        <InputNumber min={0} max={99999999999} precision={4} style={{width:280}}/>
                    )}
                </FormItem>
                <FormItem
                    {...formItemLayout}
                    label="优惠减免 CNY"
                    hasFeedback
                >
                    {getFieldDecorator('benefit', {
                        rules: [{
                            required: true, message: '请输入优惠减免',

                        }],
                        initialValue: dataSource.benefit
                    })(
                        <InputNumber min={0} max={99999999999} precision={4} style={{width:280}}/>
                    )}
                </FormItem>

            </Form>

            </Modal>   
            )
        }
})

function mapStateToProps(state){
    return{
        loading: state.loading.models.strategy, strategy: state.strategy
    };
}

export default connect(mapStateToProps)(strategyDetail);